<template>
  <el-dialog :visible.sync="dialogVisible" width="600px" title="成为合作伙伴">
    <el-form :model="queryForm" :rules="queryFormRules"
             ref="queryFormRef"
             style="margin-top: 30px;"
             label-position="left" label-width="85px" class="SignInForm">
      <el-form-item label="企业名称" prop="enterprise">
        <el-input v-model="queryForm.enterprise"
                  class="input-width"
                  placeholder="请输入企业名称"></el-input>
      </el-form-item>
      <el-form-item label="企业类型" prop="enterpriseType">
        <el-select v-model="queryForm.enterpriseType" placeholder="请选择企业类型" class="input-width">
          <el-option
              v-for="item in enterpriseTypeList"
              :key="item.code"
              :label="item.description"
              :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司规模" prop="scaleCode">
        <el-select v-model="queryForm.scaleCode" placeholder="请选择公司规模" class="input-width">
          <el-option
              v-for="item in scaleCodeList"
              :key="item.code"
              :label="item.description"
              :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog--footer">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button type="primary" @click="confirmClickHandle">提交</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import {Vue, Component, PropSync, Watch, Ref} from "vue-property-decorator";
import {applyAgent} from "@/api/sign";

@Component
export default class RechargeMoney extends Vue {
  @Ref() readonly queryFormRef: HTMLFormElement;
  @PropSync("visible", {
    type: Boolean,
    default: false,
  })
  dialogVisible: boolean;

  queryForm = {
    enterprise: "",
    enterpriseType: "",
    scaleCode: "",
  };
  queryFormRules = {
    enterprise: [
      { required: true, message: "请输入企业名称", trigger: "blur" },
    ],
    enterpriseType: [
      { required: true, message: "请选择企业类型", trigger: "blur" },
    ],
    scaleCode: [
      { required: true, message: "请选择公司规模", trigger: "blur" },
    ],
  };
  // 企业类型下拉列表
  enterpriseTypeList = [
    { code: "HZ", description: "合资" },
    { code: "DZ", description: "独资" },
    { code: "GY", description: "国有" },
    { code: "SY", description: "私营" },
    { code: "QBSYZ", description: "全民所有制" },
    { code: "GFZ", description: "股份制" },
    { code: "JTSYZ", description: "集体所有制" },
    { code: "YXZR", description: "有限责任" },
  ];
  scaleCodeList = [
    { code: "10", description: "0-10人" },
    { code: "30", description: "10-30人" },
    { code: "50", description: "30-50人" },
    { code: "80", description: "50-80人" },
    { code: "100", description: "80-100人" },
    { code: "500", description: "100-500人" },
    { code: "501", description: "500以上" },
  ];

  @Watch("dialogVisible")
  async handleVisibleChange(v) {
    if (v) {
      this.init();
    }
  }

  init() {
    // 初始化表单
    this.queryForm = {
      enterprise: "",
      enterpriseType: "",
      scaleCode: "",
    };
  }



  async confirmClickHandle() {
    await this.queryFormRef.validate();
    try {
      const form = {
        enterprise: this.queryForm.enterprise,
        enterpriseType: this.queryForm.enterpriseType,
        scaleCode: this.queryForm.scaleCode,
      };
      const response = await applyAgent(form);
      const {code, data} = response.data;
      if (code === 200) {
        this.$message({
          type: "success",
          message: "申请提交成功!",
        });
        this.dialogVisible = false;
      }
    } catch (e) {
      if (e === "certificate:校验码错误") {
        e = "验证码不正确";
      }
      this.$message({
        type: "warning",
        message: e.replace(/[A-Z|a-z|:|：]/g, ""),
      });
    }
  }

  /**
   * 关闭弹窗
   */
  closeHandle() {
    this.dialogVisible = false;
  }
}
</script>

<style lang="scss" scoped>
.SignInForm__code {
  display: flex;
}
.input-width {
  width: 100%;
}
</style>
